<template>
  <div class="technicList">
    <van-nav-bar class="title" title="面试技巧">
      <template #left>
        <i @click="$router.push('/find')" class="iconfont icon-zuojiantou"></i>
      </template>
    </van-nav-bar>

    <van-search
      @click="
        $router.push({ name: 'SearchTechnic', query: { type: 'technic' } })
      "
      v-model="value"
      placeholder="请输入关键词"
    />
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <article-item
        v-for="item in list"
        :key="item.id"
        :item="item"
        @click.native="$router.push('/technicDetail/' + item.id)"
      />
    </van-list>
  </div>
</template>

<script>
import { skiisList } from '@/api/InterviewSkills'
import ArticleItem from '@/components/Find/ArticleItem.vue'
export default {
  components: { ArticleItem },
  data () {
    return {
      value: '',
      list: [],
      loading: false,
      finished: false,
      current: 0,
      limit: 5

    }
  },
  methods: {
    fn () {
      console.log(11);
    },
    async onLoad () {
      const res = await skiisList({
        start: this.current,
        limit: this.limit
      })
      this.current = this.limit
      this.list.push(...res.data.list)
      console.log(res);
      this.loading = false
      if (this.list.length >= res.data.total) {
        this.finished = true
      }
    },
  },
}
</script>

<style lang="less" scoped>
.technicList {
  .title {
    ::v-deep .van-ellipsis {
      font-size: 18px;
    }
    .icon-zuojiantou {
      font-size: 25px;
    }
  }
}
</style>
